<SettingsLayout page='settings/instances/{params.instanceName}' label={params.instanceName}>
  <h1 class="instance-name-h1">{params.instanceName}</h1>

  {#if verifyCredentials}
    <h2>{intl.loggedInAs}</h2>
    <InstanceUserProfile {verifyCredentials} />
    <h2>{intl.theme}</h2>
    <ThemeSettings {instanceName} />
    <h2>{intl.homeTimelineFilters}</h2>
    <HomeTimelineFilterSettings {instanceName} />
    <h2>{intl.notificationFilters}</h2>
    <NotificationFilterSettings {instanceName} />
    <h2>{intl.wordFilters}</h2>
    <WordFilterSettings {instanceName} />
    <h2>{intl.pushNotifications}</h2>
    <PushNotificationSettings {instanceName} />
    <InstanceActions {instanceName} />
  {/if}
</SettingsLayout>
<style>
  .instance-name-h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<script>
  import { store } from '../../../_store/store.js'
  import SettingsLayout from '../../../_components/settings/SettingsLayout.html'
  import InstanceUserProfile from '../../../_components/settings/instance/InstanceUserProfile.html'
  import HomeTimelineFilterSettings from '../../../_components/settings/instance/HomeTimelineFilterSettings.html'
  import NotificationFilterSettings from '../../../_components/settings/instance/NotificationFilterSettings.html'
  import PushNotificationSettings from '../../../_components/settings/instance/PushNotificationSettings.html'
  import ThemeSettings from '../../../_components/settings/instance/ThemeSettings.html'
  import InstanceActions from '../../../_components/settings/instance/InstanceActions.html'
  import WordFilterSettings from '../../../_components/settings/instance/WordFilterSettings.html'
  import { updateVerifyCredentialsForInstance } from '../../../_actions/instances.js'
  import { updateFiltersForInstance } from '../../../_actions/filters.js'

  export default {
    async oncreate () {
      const { instanceName } = this.get()
      await Promise.all([
        updateVerifyCredentialsForInstance(instanceName),
        updateFiltersForInstance(instanceName)
      ])
    },
    store: () => store,
    computed: {
      instanceName: ({ params }) => params.instanceName,
      verifyCredentials: ({ $verifyCredentials, instanceName }) => $verifyCredentials && $verifyCredentials[instanceName]
    },
    components: {
      SettingsLayout,
      InstanceUserProfile,
      PushNotificationSettings,
      ThemeSettings,
      InstanceActions,
      HomeTimelineFilterSettings,
      NotificationFilterSettings,
      WordFilterSettings
    }
  }
</script>
